<template>
    <div class="wrapper">
        <h1>Props</h1>
        <PropsChildren a="哈哈" :b="1" :list="personList"></PropsChildren>
    </div>
</template>

<script lang="ts" setup name="Props">

import { ref, reactive } from 'vue'
import PropsChildren from './PropsChildren.vue'
import { type IPerson, type TPersonslist } from '@/types'

let person: IPerson = {
    id: '1',
    name: '张三',
    age: 18,
}

let personList = reactive<TPersonslist>([
    {
        id: '1',
        name: '张三',
        age: 18,
    },
    {
        id: '2',
        name: '李四',
        age: 20,
    }, {
        id: '3',
        name: '王五',
        age: 30,
    }
])

</script>


<style scoped>
.wrapper {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

button {
    margin: 0 5px;
}
</style>